<template>
  <el-dialog :close-on-click-modal="false" draggable :title="title" v-model="visible" width="1000px" append-to-body @close="cancel">
    <el-form ref="bizTopicRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="所属项目" prop="projectId">
        <el-select filterable clearable v-model="form.projectId" :disabled="isUpdate" placeholder="请选择所属项目">
          <el-option
              v-for="item in allProjectList"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级课题" prop="parentId">
        <el-select filterable clearable v-model="form.parentId" placeholder="请选择上级课题">
          <el-option
              v-for="item in allTopicList"
              :key="item.id"
              :label="item.topicName"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预计开始时间" prop="startTime">
        <el-date-picker clearable
                        v-model="form.startTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择预计开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间" prop="endTime">
        <el-date-picker clearable
                        v-model="form.endTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择截止时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="负责人" prop="managerId">
        <el-button class="user-btn-width" @click="openSelectUser">{{ form.managerName || '请选择负责人' }}</el-button>
      </el-form-item>
      <el-form-item label="课题名称" prop="topicName">
        <el-input maxlength="50" v-model="form.topicName" placeholder="请输入课题名称"/>
      </el-form-item>
      <el-form-item label="描述" prop="des">
        <el-input maxlength="500" v-model="form.des" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input maxlength="500" v-model="form.memo" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(false)">保 存</el-button>
        <el-button v-if="form.status==0" type="primary" @click="submitForm(true)">保存并启动</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <selectUser ref="selectRef" @ok="handleSelectUser"/>
</template>
<script setup name="TopicAdd">
import {getBizTopic, listAllTopic,addBizTopic,updateBizTopic} from "@/api/biz/bizTopic.js";
import {listAllProject} from "@/api/biz/bizProject.js";
import selectUser from "@/views/system/user/selectUser.vue";
const {proxy} = getCurrentInstance();
const emit = defineEmits(["ok"]);
const props = defineProps({
  projectId: {
    type: [Number, String]
  },
  topicId: {
    type: [Number, String]
  },
});
watch(() => props.topicId, (newTopicId) => {
  dataId.value = newTopicId;
});
watch(() => props.projectId, (newProjectId) => {
  projectId.value = newProjectId;
});
const isUpdate = ref(false);
const visible = ref(false);
const allProjectList = ref([]);
const allTopicList = ref([]);
const title = ref("");
const dataId = ref(null);
const projectId = ref(null);
const data = reactive({
  form: {},
  rules: {
    projectId: [
      {required: true, message: "所属项目不能为空", trigger: "submit"}
    ],
    managerId: [
      {required: true, message: "负责人不能为空", trigger: "submit"}
    ],
    startTime: [
      {required: true, message: "预计开始时间不能为空", trigger: "submit"}
    ],
    endTime: [
      {required: true, message: "截止时间不能为空", trigger: "submit"}
    ],
    topicName: [
      {required: true, message: "课题名称不能为空", trigger: "submit"}
    ],
  }
});
const {form, rules} = toRefs(data);
// 表单重置
function reset() {
  form.value = {
    id: null,
    createTime: null,
    updateTime: null,
    deleted: null,
    topicName: null,
    parentId: null,
    projectId: null,
    endTime: null,
    des: null,
    memo: null,
    managerId: null,
    status: '0',
    userId: null
  };
  proxy.resetForm("bizTopicRef");
}
/** 提交按钮 */
function submitForm(submit) {
  proxy.$refs["bizTopicRef"].validate(valid => {
    if (valid) {
      if (submit) {
        form.value.status = 1;
      }
      if (form.value.id != null) {
        updateBizTopic(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          visible.value = false;
          emit("ok");
        });
      } else {
        addBizTopic(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          visible.value = false;
          emit("ok");
        });
      }
    }
  });
}

function cancel() {
  visible.value = false;
}
function getListAllTopic() {
  listAllTopic({parentId: 0}).then(response => {
    allTopicList.value = response.data;
  });
}
function getListAllProject() {
  listAllProject({}).then(response => {
    allProjectList.value = response.data;
  });
}
function handleSelectUser(data) {
  form.value.managerName = data.value[0].nickName;
  form.value.managerId = data.value[0].userId;
}

/** 打开授权用户表弹窗 */
function openSelectUser() {
  proxy.$refs["selectRef"].show();
}
// 显示弹框
function show() {
  visible.value = true;
  reset();
  if(dataId.value){
    isUpdate.value = true;
    getBizTopic(dataId.value).then(response => {
      form.value = response.data;
      form.value.parentId = form.value.parentId || null;
      title.value = "修改子课题";
    });
  }else{
    isUpdate.value = false;
    form.value.projectId = projectId.value;
    title.value = "新增子课题";
  }
}
defineExpose({
  show,
});
getListAllTopic();
getListAllProject();
</script>